<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./CSS/index.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">

    <style>
        .loginOrEx{
            cursor: pointer;
            display: inline-block;
            width: 37px;
            height: 25px;
            background-color: red;

            text-align: center;
            line-height: 25px;

            background-color: skyblue;
            color: white;
            font-weight: bold;

            margin-left: 20px;
            border-radius: 5px;
        }

        .loginExit{
            background-color: red;

        }
    </style>
</head>

<body>
<div id="app">
    <div class="headbox">
        <div class="contain">
            <div class="logoBox">
                <div class="logoimage">
                    <img src="./image/logo.png" style="width: 100%;height: 100%;">
                </div>
                <div class="logoText">
                    <img src="./image/mynameLogo.png" style="width: 100%;height: 100%;">
                </div>
            </div>

            <div class="directionBox">

                <ul>
                    <li>
                        <div>首页</div>
                    </li>
                    <li>
                        <div id="raceIndex">比赛中心</div>
                    </li>
                    <li>
                        <div id="courseIndex">课程中心</div>
                    </li>
                    <li>
                        <div id="userIndex">个人中心</div>
                    </li>
                </ul>
            </div>
            <div class="userBox">
                <div class="userImage">
                    <img :src="userMsg.uurl" style="width: 100%;height: 100%;">
                </div>
                <div class="userName">
                    {{userMsg.username}}
                    <div class="loginOrEx" v-if="userMsg.username=='未登录'" @click="tologin">登录</div>
                    <div class="loginOrEx loginExit" v-else @click ="exitLogin">退出</div>
                </div>
            </div>
        </div>
    </div>

    <div id="bbb">
        <div class="part1">
            <div class="part1-text">
                <p style="
    color: rgb(227, 221, 221);
    font-weight: bold;
    font-family: 楷体; font-size: 35px;">学海无涯苦作舟</p>
                <p style="font-size: 16px;margin-top: 30px; color: rgb(227, 221, 221);margin-bottom: 30px;">
                    让课程为你指明方向，让比赛充实你的生活!
                </p>
                <div class="CheckBox">
                    <div class="toRace" id="toRace">
                        报名比赛
                    </div>
                    <div class="toCurriclum" id="toCurriclum">
                        购买课程
                    </div>
                </div>
            </div>
        </div>
        <div class="part2">
            <div class="contain2">
                <div class="part2_title">热门推荐</div>
                <div class="hotRace">
                    <div class="title">
                        <p style="font-size: 20px;">热门赛事</p>
                        <div class="more">查看更多 ></div>
                    </div>

                    <div class="hotRaceList">
                        <div class="riceItem" v-for="(item,i) in RaceList" :key="i">
                            <div class="itembox">
                                <div class="raceName">{{item.race.rname}}</div>
                                <div class="raceDescription">
                                    <div class="companyImage">
                                        <img :src="item.race.rurl" style="width: 100%;height: 100%;">
                                    </div>
                                    <div class="raseMsg">
                                        <p style="
                    font-size: 20px;overflow: hidden;text-overflow : ellipsis;display : -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical; font-family: 楷体;
">
                                            {{item.race.desc }}
                                        </p>
                                        <p style="margin-top: 20px; font-size: 20px;">主办方:</p>
                                        <div class="componyMsg">
                                            <div class="componName">
                                                <img :src="item.company.logo" style="width: 100%;height: 100%;">
                                            </div>
                                            <p class="companyName">{{item.company.cname}}</p>
                                            <div class="baomingBox" @click="baoming(item.race.rid)">立刻报名</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="contain2" style="margin-top: 5px;">
                <div class="title">
                    <p style="font-size: 20px;">热门课程</p>
                    <div class="more">查看更多 ></div>
                </div>

                <div class="courseList">
                    <div class="courseItem" v-for="(item,i) in CourseList" :key="i">
                        <div class="courseImage">
                            <img :src="item.subject.surl" style="width: 100%;height: 100%;">
                        </div>
                        <div class="courseDescript">
                            <p style="font-weight: 900;font-size: 18px;">{{item.subject.sname}}</p>
                            <p style="overflow: hidden;text-overflow : ellipsis;display : -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;margin-top: 10px;">
                                {{item.subject.desc}}
                            </p>

                            <div class="teacherMsg">
                                <div class="teacherImage" style="overflow: hidden;">
                                    <img :src="item.user.uurl" style="width: 100%;height: 100%;">
                                </div>
                                <p style="font-family: 楷体;margin-left: 5px; font-weight: bold;color: rgb(112, 106, 106);width: 23rem;">
                                    {{item.user.username}}</p>
                                <span class="iconfont icon-pinglun"></span>
                                <span style="color: rgb(170, 169, 169);font-size: 10px;margin-left: 5px;">24</span>
                                <span style="color: skyblue;margin-left: 20px;" @click="toCourseIndex(item.subject.sid)">详情 ></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer"></div>
        </div>
    </div>
    </div>

    <script src="./JS/common.js"></script>
    <script src="./JS/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // vue代码
        const vm = new Vue({
            el: "#app",
            data: {
                userMsg:{username:'未登录',uurl:'./image/userNologin.png'},
                RaceList: [],
                CourseList: []
            },
            methods: {
                toCourseIndex(sid){

                    location.href="./courseIndex.html?sid="+sid
                },
                baoming(rid){
                    const user = JSON.parse(sessionStorage.getItem("user"))
                    if(user==null){
                        alert("您还未登录")
                        location.href="./login.html"
                        return
                    }
                    location.href="./application.html?raceid="+rid
                },
                getCourse(){
                    axios({
                        method: "post",
                        url:'/Indenture/subjectList',
                        data: {
                            pageIndex:1
                        },
                    }).then((res)=>{
                        console.log(res.data)
                        this.CourseList = res.data.subjectMsg
                    })
                },
                getRaceList(){
                    axios({
                        method: "post",
                        url:'/Indenture/raceList',
                        data: {
                            pageIndex:1
                        },
                    }).then((res)=>{
                        console.log(res.data)

                        for (let i=0;i<4;i++){
                            this.RaceList.push(res.data.racesMsg[i])
                        }
                    })
                },
                exitLogin(){
                    sessionStorage.removeItem("user")

                    this.userMsg = {username:'未登录',uurl:'./image/userNologin.png'}
                },
                tologin(){
                    location.href = "./login.html"
                }
            },
            created(){
                const userMsgk = JSON.parse(sessionStorage.getItem("user"))
                if(userMsgk!==null){
                    this.userMsg = userMsgk
                }

                this.getRaceList()
                this.getCourse()

            }
        })
        // Dom

        // 下滑监听
        var headbox = document.querySelector(".headbox");
        var disrectionLi = document.querySelectorAll(".directionBox li")
        window.onscroll = function () {
            // 获取滚动距离console.log(window.scrollY)
            if (window.scrollY == 0) {
                headbox.style.backgroundColor = "rgba(0, 0, 0,0)"
                disrectionLi.forEach((item, i) => {
                    disrectionLi[i].style.color = "white"

                })
            } else {
                headbox.style.backgroundColor = "rgb(210, 234, 255)"
                disrectionLi.forEach((item, i) => {
                    disrectionLi[i].style.color = "black"
                })
            }
        }

        // 页面跳转比赛中心
        var raceIndex = document.querySelector("#raceIndex");
        raceIndex.addEventListener("click", () => {
            window.location.href = "race.html"
        })

        // 页面跳转到个人中心
        var userIndex = document.querySelector("#userIndex");
        userIndex.addEventListener("click", () => {
            window.location.href = "userIndex.html"
        })

        // 页面跳课程中心
        var courseIndex = document.querySelector('#courseIndex')
        courseIndex.addEventListener("click", () => {
            window.location.href = "curriculum.html"
        })

        // 页面跳转比赛中心
        var raceIndex = document.querySelector("#toRace");
        raceIndex.addEventListener("click", () => {
            window.location.href = "race.html"
        })


        // 页面跳课程中心
        var courseIndex = document.querySelector('#toCurriclum')
        courseIndex.addEventListener("click", () => {
            window.location.href = "curriculum.html"
        })
    </script>
</body>

</html>